<template>
	 <view class="work-container">
		 <view class="example-body" >
		 		  <uni-row class="demo-uni-row" >
		 		  	<uni-col :span="5">
		 				<text  style="font-size: 22px;">{{this.$store.state.user.name}}</text>
		 		  	</uni-col>
		 		  	<uni-col :span="5">
		 		  		<text style="font-size: 18px;">{{bindWorkshopName}}</text>
		 		  	</uni-col>
		 		  	<uni-col :span="8">
		 		  		<text style="font-size: 18px;">{{bindStationName}}</text>
		 		  	</uni-col>
		 		  	<uni-col :span="6">
		 				<button type="primary" size="mini" @click="onClickItem"  >绑定工位</button>
		 		  	</uni-col>
		 		  </uni-row>
		 </view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				active-color="#007aff" @clickItem="onClickStatus"/>
		</view>
		<view class="resourceList">
			<view v-for="(item,index) in workOrderList" :key="index" style="margin-top: 10rpx;">
				<uni-row class="resourceList-uni-row">
					<text style="font-size: 18px;font-weight:bold;">
						产品:&nbsp;&nbsp;&nbsp;{{item.materialName}}
					</text>
				</uni-row>
				<uni-row class="resourceList-uni-row">
					<text class="resourceList-text">
					工单号:&nbsp;&nbsp;&nbsp;{{item.number}}
					</text>
				</uni-row>
				<uni-row class="resourceList-uni-row">
					<text class="resourceList-text">
					生产数量:&nbsp;&nbsp;&nbsp;{{item.quantity}} &nbsp;&nbsp;&nbsp;({{item.materialUnitName}})
					</text>
				</uni-row>
				<uni-row class="resourceList-uni-row">
					<text class="resourceList-text">
					规格型号:&nbsp;&nbsp;&nbsp;{{item.specification}}
					</text>
				</uni-row>
				<uni-row class="resourceList-uni-row">
					<uni-col :span="24">
						<text class="resourceList-text">
						批次号:&nbsp;&nbsp;&nbsp;{{item.batchNumber}}
						</text>
					</uni-col>
				</uni-row>
				<uni-row class="resourceList-uni-row">
					<uni-col :span="12">
						<text class="resourceList-text">
						计划完工:&nbsp;&nbsp;&nbsp;{{item.planFinishDate}}
						</text>
					</uni-col>
					<uni-col :span="6">
						<view v-if="queryParams.mobileStatus=='X'" class="tag-view" style="margin-top: 6rpx;">
							<uni-tag :circle="true" text="未分配" type="error" />
						</view>
						<view v-if="queryParams.mobileStatus=='B'" class="tag-view" style="margin-top: 6rpx;">
							<uni-tag :circle="true" text="生产中" type="error" />
						</view>
						<view v-if="queryParams.mobileStatus=='D'" class="tag-view" style="margin-top: 6rpx;">
							<uni-tag :circle="true" text="已完成" type="error" />
						</view>
					</uni-col>
					<uni-col :span="6">
						<button plain="true"   size="mini" type="primary" @click="clickReport(item.id)">操作</button>
					</uni-col>
				</uni-row>
				
			</view>
		</view>	
	</view>		
</template>

<script>
	import {  getStation} from "@/api/masterdata/station";
	import {  listForMobile} from "@/api/production/workOrder";
	import { mobileBindUserStation,getInfoByUserId } from "@/api/common/sysUserStation";
	import storage from '@/utils/storage'
	import {scanCodeBindStation} from '@/utils/mesUntil.js'
	import {
	  listWorkOrder,getWorkOrder
	} from '@/api/production/workOrder'
	export default {
		data() {
		  return {
			// 总条数
			total: 0,
			current:1,
			items: ['未分配','生产中', '已完成'],
			styleType: 'button',
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				orderByColumn:'',
				isAsc:"",
				/* 移动端用的工单状态,与字典中稍有差异 */
				mobileStatus: "B",
			},
			// 工单表格数据
			workOrderList: [],
			
			bindStationName: "?工位",
			bindWorkshopName: "?车间"
		  }
		},
		created() {
			this.getSysUserStationList();
			this.getList();
		},
		methods: {
			/** 查询工单列表 */
			getList() {
			  listForMobile(this.queryParams).then(response => {
				this.workOrderList = response.rows;
				this.total = response.total;
			  });
			},
			onClickItem() {	
				let _this =this;
				scanCodeBindStation(_this);
			},
			getSysUserStationList(){
				getInfoByUserId().then(response => {
					this.bindStationName=response.data.stationName;
					this.bindWorkshopName=response.data.workshopName;
				});
			},
			onClickStatus(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					if ( e.currentIndex==0) {
						this.queryParams.mobileStatus = "X";
					}
					if ( e.currentIndex==1) {
						this.queryParams.mobileStatus = "B";
					}
					if ( e.currentIndex==2) {
						this.queryParams.mobileStatus = "D";
					}
					this.getList();
				}
			},
			clickReport(id){
				this.$tab.navigateTo("/pages/production/workOrder/report?id="+id);
			}
			
		},
		
	}
</script>

<style>
	.demo-uni-row {
		margin-bottom: 5rpx;

		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}
	
	.resourceList-uni-row {
		margin-bottom: 8rpx;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 10rpx 10rpx 0;
		overflow: hidden;
	}
	
	.resourceList-text{
		font-size: 16px;
	}
	
	.resourceList{
		margin-left: 10px;
		
	}
	
</style>